@import './variables.less';
@import '../../style/mixins.less';

.fnx-uploader {
	position: relative;
	display: inline-block;

	&--disabled {
		.fnx-uploader__wrapper {
			opacity: var(--fnx-uploader-disabled-opacity);
		}
	}

	&__wrapper {
		display: flex;
		flex-wrap: wrap;
	}

	&__input {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: hidden; // to clip file-upload-button
		cursor: pointer;
		opacity: 0;

		&-wrapper {
			position: relative;
		}

		&:disabled {
			cursor: not-allowed;
		}
	}

	&__upload {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		width: var(--fnx-uploader-size);
		height: var(--fnx-uploader-size);
		margin: 0 var(--fnx-padding-xs) var(--fnx-padding-xs) 0;
		background-color: var(--fnx-uploader-upload-background-color);

		&:active {
			background-color: var(--fnx-uploader-upload-active-color);
		}

		&-icon {
			color: var(--fnx-uploader-icon-color);
			font-size: var(--fnx-uploader-icon-size);
		}

		&-text {
			margin-top: var(--fnx-padding-xs);
			color: var(--fnx-uploader-text-color);
			font-size: var(--fnx-uploader-text-font-size);
		}
	}

	&__preview {
		position: relative;
		margin: 0 var(--fnx-padding-xs) var(--fnx-padding-xs) 0;
		cursor: pointer;

		&-image {
			display: block;
			width: var(--fnx-uploader-size);
			height: var(--fnx-uploader-size);
			overflow: hidden;
		}

		&-remove {
			position: absolute;
			top: 0;
			right: 0;
			width: var(--fnx-uploader-delete-icon-size);
			height: var(--fnx-uploader-delete-icon-size);
			background-color: var(--fnx-uploader-delete-background-color);
			border-radius: 0 0 0 12px;

			&-icon {
				position: absolute;
				top: -2px;
				right: -2px;
				color: #fff;
				color: var(--fnx-uploader-delete-color);
				font-size: 16px;
				transform: scale(0.5);
			}
		}

		&-cover {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
		}
	}

	&__mask {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: var(--fnx-uploader-mask-text-color);
		background-color: var(--fnx-uploader-mask-background-color);

		&-icon,
		&-icon-loading {
			font-size: var(--fnx-uploader-mask-icon-size);
		}

		&-message {
			margin-top: 6px;
			padding: 0 var(--fnx-padding-base);
			font-size: var(--fnx-uploader-mask-message-font-size);
			line-height: var(--fnx-uploader-mask-message-line-height);
		}
	}
}
